<script setup lang='ts'>
import type { messageType } from 'element-plus'

interface Options {
  visible: boolean
  title: string
  message?: string
  type?: messageType
  width?: string
  hideFooter?: boolean
}
const emit = defineEmits(['done'])
const options = defineModel<Options>()
</script>

<template>
  <el-dialog
    v-model="options.visible"
    :title="options.title"
    :width="options.width || '400px'"
    :close-on-click-modal="false"
  >
    <div v-if="options.message" class="alert" :class="[options.type || 'warning']" v-html="options.message" />
    <slot />
    <template #footer>
      <div v-show="!options.hideFooter" class="dialog-footer">
        <el-button @click="options.visible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="emit('done')">
          确 定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang='scss'>
.alert {
  padding: 6px 10px;
  border-radius: 4px;
  &.warning {
    background-color: #fef4ea;
    color: var(--el-color-warning);
  }
  &.error {
    background-color: #fef0f0;
    color: var(--el-color-danger);
  }
  &.success {
    background-color: #f0f9eb;
    color: var(--el-color-success);
  }
  :deep(b) {
    color: #fa6262 !important;
  }
}
</style>
